<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>教师信息管理</title>
    <!-- 引入LayUI CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.10/css/layui.css">
    <style>
        .layui-layout-admin .layui-header {
            background-color: #009688;
        }
        .layui-layout-admin .layui-logo {
            color: #ffffff;
            font-size: 18px;
            font-weight: bold;
        }
        .container {
            width: 95%;
            margin: 20px auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            margin: 20px 0;
        }
        .search-box {
            background: #f8f8f8;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        .search-form {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .search-form .layui-input, .search-form .layui-select {
            width: 150px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 头部区域 -->
    <div class="layui-header">
        <div class="layui-logo">教师管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="/students/list">学生管理</a>
            </li>
            <li class="layui-nav-item layui-this">
                <a href="/teachers/list">教师管理</a>
            </li>
        </ul>
    </div>

    <!-- 内容主体区域 -->
    <div class="layui-body" style="top: 60px;">
        <div class="container">
            <div class="header">
                <h1 class="layui-font-black">教师信息管理</h1>
            </div>
            
            <!-- 搜索和操作区域 -->
            <div class="search-box">
                <div class="search-form">
                    <label class="layui-form-label" style="width: auto; padding-right: 10px;">教师姓名：</label>
                    <input type="text" id="searchName" placeholder="请输入教师姓名" class="layui-input">
                    
                    <label class="layui-form-label" style="width: auto; padding-right: 10px;">所属部门：</label>
                    <select id="searchDepartment" class="layui-select">
                        <option value="">请选择部门</option>
                        <option value="计算机科学与技术学院">计算机科学与技术学院</option>
                        <option value="电子工程学院">电子工程学院</option>
                        <option value="数学与统计学院">数学与统计学院</option>
                        <option value="物理学院">物理学院</option>
                        <option value="化学学院">化学学院</option>
                        <option value="外国语学院">外国语学院</option>
                        <option value="机械工程学院">机械工程学院</option>
                        <option value="经济管理学院">经济管理学院</option>
                    </select>
                    
                    <label class="layui-form-label" style="width: auto; padding-right: 10px;">职称：</label>
                    <select id="searchTitle" class="layui-select">
                        <option value="">请选择职称</option>
                        <option value="教授">教授</option>
                        <option value="副教授">副教授</option>
                        <option value="讲师">讲师</option>
                        <option value="助教">助教</option>
                    </select>
                    
                    <button class="layui-btn" onclick="searchTeachers()">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button class="layui-btn layui-btn-primary" onclick="resetSearch()">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                    <button class="layui-btn layui-btn-normal" onclick="addTeacher()">
                        <i class="layui-icon layui-icon-add-1"></i> 新增教师
                    </button>
                </div>
            </div>
        
            <div class="layui-card">
                <div class="layui-card-header">教师数据</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="teacherTable" lay-filter="teacherTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 操作按钮模板 -->
<script type="text/html" id="barTpl">
    <a class="layui-btn layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i> 编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </a>
</script>

<!-- 教师表单弹窗 -->
<div id="teacherForm" style="display: none; padding: 20px;">
    <form class="layui-form" lay-filter="teacherFormFilter">
        <input type="hidden" name="id" id="teacherId">
        
        <div class="layui-form-item">
            <label class="layui-form-label">教师编号 <span style="color: red;">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="teacherId" id="formTeacherId" required lay-verify="required" 
                       placeholder="请输入教师编号" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">教师姓名 <span style="color: red;">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="name" id="formName" required lay-verify="required" 
                       placeholder="请输入教师姓名" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">所属部门 <span style="color: red;">*</span></label>
            <div class="layui-input-block">
                <select name="department" id="formDepartment" lay-verify="required">
                    <option value="">请选择部门</option>
                    <option value="计算机科学与技术学院">计算机科学与技术学院</option>
                    <option value="电子工程学院">电子工程学院</option>
                    <option value="数学与统计学院">数学与统计学院</option>
                    <option value="物理学院">物理学院</option>
                    <option value="化学学院">化学学院</option>
                    <option value="外国语学院">外国语学院</option>
                    <option value="机械工程学院">机械工程学院</option>
                    <option value="经济管理学院">经济管理学院</option>
                </select>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">职称 <span style="color: red;">*</span></label>
            <div class="layui-input-block">
                <select name="title" id="formTitle" lay-verify="required">
                    <option value="">请选择职称</option>
                    <option value="教授">教授</option>
                    <option value="副教授">副教授</option>
                    <option value="讲师">讲师</option>
                    <option value="助教">助教</option>
                </select>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" id="formPhone" placeholder="请输入联系电话" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱地址</label>
            <div class="layui-input-block">
                <input type="email" name="email" id="formEmail" placeholder="请输入邮箱地址" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="teacherSubmit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
    
<!-- 引入LayUI JS -->
<script src="https://cdn.staticfile.org/layui/2.8.10/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

<th:block th:inline="none">

<script>
    layui.use(['table', 'layer', 'element', 'form'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var element = layui.element;
        var form = layui.form;
        
        // 初始化表格
        table.render({
            elem: '#teacherTable',
            url: '/teachers/api/all',
            cols: [[
                {type: 'checkbox', width: 50},
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'teacherId', title: '教师编号', width: 120},
                {field: 'name', title: '姓名', width: 100},
                {field: 'department', title: '部门', width: 180},
                {field: 'title', title: '职称', width: 100},
                {field: 'phone', title: '联系电话', width: 130},
                {field: 'email', title: '邮箱', width: 200},
                {fixed: 'right', title: '操作', toolbar: '#barTpl', width: 150}
            ]],
            page: true,
            height: 'full-280',
            text: {
                none: '暂无相关数据'
            }
        });

        // 监听表格工具条
        table.on('tool(teacherTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定删除这名教师吗？', {icon: 3, title:'提示'}, function(index){
                    // 发送删除请求
                    var loading = layer.load(1, {shade: [0.3,'#000']});
                    $.ajax({
                        url: '/teachers/api/delete/' + data.id,
                        type: 'DELETE',
                        success: function(result) {
                            layer.close(loading);
                            if(result.code === 0) {
                                layer.msg('删除成功', {icon: 1});
                                table.reload('teacherTable');
                            } else {
                                layer.msg('删除失败：' + result.msg, {icon: 2});
                            }
                            layer.close(index);
                        },
                        error: function() {
                            layer.close(loading);
                            layer.msg('删除失败，请检查网络连接', {icon: 2});
                            layer.close(index);
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                editTeacher(data);
            }
        });

        // 监听表单提交
        form.on('submit(teacherSubmit)', function(data){
            var field = data.field;
            var isEdit = field.id && field.id !== '';
            var url = isEdit ? '/teachers/api/update/' + field.id : '/teachers/api/add';
            var method = isEdit ? 'PUT' : 'POST';
            
            var loading = layer.load(1, {shade: [0.3,'#000']});
            $.ajax({
                url: url,
                type: method,
                contentType: 'application/json',
                data: JSON.stringify(field),
                success: function(result) {
                    layer.close(loading);
                    if(result.code === 0) {
                        layer.msg(isEdit ? '更新成功' : '添加成功', {icon: 1});
                        layer.closeAll('page');
                        table.reload('teacherTable');
                    } else {
                        layer.msg((isEdit ? '更新' : '添加') + '失败：' + result.msg, {icon: 2});
                    }
                },
                error: function() {
                    layer.close(loading);
                    layer.msg((isEdit ? '更新' : '添加') + '失败，请检查网络连接', {icon: 2});
                }
            });
            return false;
        });

        // 搜索功能 - 支持多个属性组合查询
        window.searchTeachers = function() {
            var name = $('#searchName').val().trim();
            var department = $('#searchDepartment').val();
            var title = $('#searchTitle').val();
            
            // 构建查询参数，只包含非空值
            var params = {};
            if(name) params.name = name;
            if(department) params.department = department;
            if(title) params.title = title;
            
            // 如果没有任何搜索条件，显示提示
            if(!name && !department && !title) {
                layer.msg('请至少输入一个搜索条件', {icon: 0});
                return;
            }
            
            table.reload('teacherTable', {
                url: '/teachers/api/search',
                where: params,
                page: {
                    curr: 1 // 重新搜索时回到第一页  
                }
            });
        };

        // 重置搜索
        window.resetSearch = function() {
            $('#searchName').val('');
            $('#searchDepartment').val('');
            $('#searchTitle').val('');
            form.render('select');
            table.reload('teacherTable', {
                url: '/teachers/api/all',
                where: {},
                page: {
                    curr: 1
                }
            });
            layer.msg('搜索条件已重置', {icon: 1});
        };

        // 清空表单函数
        function clearForm() {
            // 清空隐藏字段
            $('#teacherId').val('');
            
            // 重置表单所有字段
            form.val('teacherFormFilter', {
                id: '',
                teacherId: '',
                name: '',
                department: '',
                title: '',
                phone: '',
                email: ''
            });
            
            // 清空所有输入框
            $('#teacherForm input[type="text"]').val('');
            $('#teacherForm input[type="email"]').val('');
            $('#teacherForm input[type="hidden"]').val('');
            $('#teacherForm select').val('');
            
            // 重新渲染表单组件
            form.render();
            
            // 确保表单容器隐藏
            $('#teacherForm').hide();
        }

        // 新增教师
        window.addTeacher = function() {
            // 先清理表单
            clearForm();
            // 显示表单
            $('#teacherForm').show();
            
            layer.open({
                type: 1,
                title: '新增教师',
                content: $('#teacherForm'),
                area: ['500px', '600px'],
                success: function(layero, index) {
                    clearForm();
                    $('#teacherForm').show();
                },
                cancel: function(index, layero) {
                    // 关闭时清理表单并隐藏
                    $('#teacherForm').hide();
                    clearForm();
                    return true;
                },
                end: function() {
                    // 弹窗完全关闭后的回调
                    $('#teacherForm').hide();
                    clearForm();
                }
            });
        };

        // 编辑教师
        window.editTeacher = function(data) {
            // 先清理表单
            clearForm();
            // 显示表单
            $('#teacherForm').show();
            
            layer.open({
                type: 1,
                title: '编辑教师',
                content: $('#teacherForm'),
                area: ['500px', '600px'],
                success: function(layero, index) {
                    $('#teacherForm').show();
                    // 填充表单数据
                    setTimeout(function() {
                        form.val('teacherFormFilter', data);
                        $('#teacherId').val(data.id);
                        form.render();
                    }, 100);
                },
                cancel: function(index, layero) {
                    // 关闭时清理表单并隐藏
                    $('#teacherForm').hide();
                    clearForm();
                    return true;
                },
                end: function() {
                    // 弹窗完全关闭后的回调
                    $('#teacherForm').hide();
                    clearForm();
                }
            });
        };
        
        // 回车键搜索功能
        $('#searchName').on('keydown', function(e) {
            if(e.keyCode === 13) {
                searchTeachers();
            }
        });
        
        // 初始化效果
        layer.msg('欢迎使用教师管理系统');
    });
</script>
</th:block>
</body>
</html>